<template>
	<view>
		<view class="form-box">
			<view class="form-box-title">
				<text>登录/注册</text>
				<!-- <up-count-down :time="60 * 1000" format="ss"></up-count-down> -->
			</view>
			<view class="form-box-content">
				<view class="form-box-content-phone">
					<view class="form-box-content-phone-number">
						<text>手机号</text>
						<up-input type='Number' maxlength='11' placeholder="请输入手机号" border="surround"
							v-model="form.phone" @change="changeNumber"></up-input>
					</view>
					<view class="form-box-content-phone-number">
						<text>验证码</text>
						<up-input placeholder="请输入验证码" border="surround" v-model="form.code" @change="changeCode">
							<template #suffix>
								<view class="code" @click="startCountdown">{{ countdownText }}</view>
							</template>
						</up-input>
					</view>
				</view>
			</view>
			<view class="form-box-btn">
				<view class="form-box-btn-read">
					<checkbox-group @change="setCheckedHandle">
						<label>
							<checkbox style="transform:scale(0.68)" activeBorderColor='#000' iconColor="#000"
								color="#000" value="checked" :checked="checked">
							</checkbox>
						</label>
					</checkbox-group>
					<view class="read">
						<text>我已阅读并同意</text>
						<text>《服务协议》《隐私政策》《预定服务协议》《租车服务合同》</text>
					</view>
				</view>
				<view class="form-box-btn-login" @click="submitLogin">
					登录
				</view>
			</view>
			<view class="no-login" @click="toHomeHandle()">暂不登录</view>
		</view>
	</view>
</template>
<script setup>
import {
	ref,
	watch
} from 'vue';
import { getRequest, postRequest } from '../../reuqest/request';
const form = ref({
	phone: '',
	code: ''
})
const checked = ref(false)
const countdown = ref(60);
const isCountingDown = ref(false);
const countdownText = ref('获取验证码');
//获取验证码
const startCountdown = () => {

	const phoneRegex = /^1[3-9]\d{9}$/;
	if (!form.value.phone || !phoneRegex.test(form.value.phone)) {
		uni.$u.toast("手机号格式不正确~")
		return false;
	}

	if (!isCountingDown.value) {
		isCountingDown.value = true;
		getRequest(`/wx-user-center/api/v1/bm/account/sendSmsCaptcha/${form.phone}`)
			.then((responseData) => {
				uni.hideLoading();
				uni.$u.toast("验证码发送成功");
				const interval = setInterval(() => {
					countdown.value--;
					countdownText.value = `${countdown.value}s 重新获取`;
					if (countdown.value <= 0) {
						clearInterval(interval);
						isCountingDown.value = false;
						countdownText.value = '获取验证码';
						countdown.value = 60;
					}
				}, 1000);
			})
			.catch((error) => {

			});
	}

};
// 获取手机号值
const changeNumber = (e) => {
	form.phone = e
};
const changeCode = (e) => {
	form.code = e
}
// 阅读协议
const setCheckedHandle = (e) => {
	if (e.detail.value.length > 0) {
		checked.value = true
	} else {
		checked.value = true
	}
}
// 获取手机验证码
const validateForm = () => {
	const phoneRegex = /^1[3-9]\d{9}$/;
	if (!form.value.phone || !phoneRegex.test(form.value.phone)) {
		uni.showToast({
			title: "手机号格式不正确~",
			icon: 'none'
		})
		return false;
	}
	if (!form.value.code) {
		uni.showToast({
			title: "验证码不能为空~",
			icon: 'none'
		})
		return false;
	}
	if (!checked.value) {
		uni.showToast({
			title: "请阅读协议~",
			icon: 'none'
		})
		return false;
	}
	return true;
};
// 登录
const submitLogin = () => {
	if (validateForm()) {
		if (!isCountingDown.value) {
			uni.$u.toast("请先获取验证码");
			return;
		}
		postRequest('/wx-user-center/api/v1/bm/login/loginByPhone', {
			smsCaptcha: form.code,
			phone: form.phone
		})
			.then((responseData) => {
				uni.showToast({
					title: `登录成功`,
					icon: 'none'
				});
				uni.setStorageSync('token', responseData.token);
				uni.setStorageSync('phone', responseData.phone);
				uni.navigateBack({ delta: 2 })
			})
	}
}
// 访客用户
const toHomeHandle = ((url) => {
	uni.navigateBack()
})
</script>
<style lang="scss">
.code {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 168rpx;
	height: 62rpx;
	background: #F6F6F6;
	border-radius: 16rpx;
	border: 2rpx solid #000000;


	font-size: 24rpx;
	color: #000000;
}

.form-box {
	padding: 66rpx 20rpx;

	.form-box-title {
		display: flex;
		justify-content: center;
		align-items: center;

		font-weight: 800;
		font-size: 44rpx;
		color: #000000;
	}

	.form-box-content {
		margin-top: 76rpx;

		.form-box-content-phone {

			.form-box-content-phone-number {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				background: #F6F6F6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 32rpx 0rpx 32rpx 32rpx;

				text:nth-of-type(1) {

					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					padding-right: 32rpx;
					border-right: 1rpx solid #757575;
					;
				}
			}
		}

	}
}

.form-box-btn {
	padding: 0rpx 22rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 120rpx;

	.form-box-btn-read {
		display: flex;
		align-items: center;

		.read {

			text:nth-of-type(1) {

				font-size: 24rpx;
				color: #000000;
			}

			text:nth-of-type(2) {

				font-weight: 400;
				font-size: 24rpx;
				color: #986C5D;
			}
		}
	}

	.form-box-btn-login {
		margin-top: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;


		font-size: 30rpx;
		color: #FFFFFF;
		height: 102rpx;

		background: #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.no-login {
	width: 100%;
	padding-top: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	font-weight: 400;
	font-size: 28rpx;
	color: #757575;
}
</style>